import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import BackToTopBtn from '../../ch/components/BackToTopBtn.vue';

<Meta
  title="Components/BackToTopBtn"
  component={BackToTopBtn}
  argTypes={{
    type:    { control: { type: 'select', options: ['default', 'negative', 'outline'] } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { BackToTopBtn },
  template: '<BackToTopBtn :type="type" :wrapper="false" />',
});

# Back to top button

## Example

<Canvas>
  <Story
    name="Example"
    args={{
      type: 'outline',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Implementation

Place the `back-to-top-btn`into a `back-to-top-wrapper` in order to display it correctly.
You can <a href="?id=pages-homepage--example" target="_blank">Open a demo page</a> and scroll down to see the button appear and diappear accordingly. Remark, this is a pure CSS implementation, no Javascript needed.


```html
  <main id="main-content">
    <div class="container">
      <!-- main content here -->
    </div>
    <div class="back-to-top-wrapper">
      <a href="#main-header" type="button" aria-label="Scroll to top" class="back-to-top-btn back-to-top-btn--outline back-to-top-btn--fixed ">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="back-to-top-btn__icon icon icon--base ">
          <path xmlns="http://www.w3.org/2000/svg" d="m19.044 14.731-6.669-3.85-6.669 3.85-.375-.649 7.044-4.067 7.044 4.067z"></path>
        </svg>
      </a>
    </div>
  </main>
```

## Back to top button types
For type variations, the following css classes are built:
- `back-to-top-btn--default` for standard back to top button
- `back-to-top-btn--negative` for standard back to top button with dark color
- `back-to-top-btn--outline` for back to top button with strokes

<Canvas>
  <button type="button" class="back-to-top-btn back-to-top-btn--default">
    <svg
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      class="back-to-top-btn__icon icon icon--base"
    >
      <path
        xmlns="http://www.w3.org/2000/svg"
        d="m19.044 14.731-6.669-3.85-6.669 3.85-.375-.649 7.044-4.067 7.044 4.067z"
      ></path>
    </svg>
  </button>
  <button type="button" class="back-to-top-btn back-to-top-btn--negative">
    <svg
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      class="back-to-top-btn__icon icon icon--base"
    >
      <path
        xmlns="http://www.w3.org/2000/svg"
        d="m19.044 14.731-6.669-3.85-6.669 3.85-.375-.649 7.044-4.067 7.044 4.067z"
      ></path>
    </svg>
  </button>
  <button type="button" class="back-to-top-btn back-to-top-btn--outline">
    <svg
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      class="back-to-top-btn__icon icon icon--base"
    >
      <path
        xmlns="http://www.w3.org/2000/svg"
        d="m19.044 14.731-6.669-3.85-6.669 3.85-.375-.649 7.044-4.067 7.044 4.067z"
      ></path>
    </svg>
  </button>
</Canvas>
